<template>
  <div class="border-box-warp">
    <span class="arrow-lt" />
    <span class="arrow-rt" />
    <span class="arrow-lb" />
    <span class="arrow-rb" />
    <slot />
  </div>
</template>

<script>
export default {
  name: 'BorderBox'
}
</script>

<style scoped lang="less">
  @border-color:#70ebec;
  @r:0;
  .border-box-warp{
    height: 200px;
    position: relative;
    border-radius: @r;
    border: 1px solid #3176a5;
    .arrow-lt,
    .arrow-rt,
    .arrow-lb,
    .arrow-rb{
      display: block;
      position: absolute;
      width: 18px;
      height: 18px;
      border: 1px solid @border-color;
    }
    .arrow-lt{
      left: -1px;
      top: -1px;
      border-right: none;
      border-bottom: none;
      border-radius: @r 0 0 0;
    }
    .arrow-rt{
      right: -1px;
      top: -1px;
      border-left: none;
      border-bottom: none;
      border-radius: 0 @r 0 0;
    }
    .arrow-lb{
      left: -1px;
      bottom: -1px;
      border-right: none;
      border-top: none;
      border-radius: 0 0 0 @r;
    }
    .arrow-rb{
      right: -1px;
      bottom: -1px;
      border-left: none;
      border-top: none;
      border-radius: 0 0 @r 0;
    }
  }
</style>
